<template>
    <div class="withdraw">
        <div class="title">{{ $t('my.提现金额') }}</div>

        <div class="input_view">
            <div class="unit">￥</div>
            <input type="number" v-model="amount" :placeholder="$t('my.请输入提现金额')" class="input">
            <div class="btn" @click="amount = balance">{{ $t('my.全部提现') }}</div>
        </div>

        <div class="options">
            <div class="key">{{ $t('my.提现至') }}</div>
            <el-select v-model="value">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="submit" @click="submit">{{ $t('my.立即提现') }}</div>
    </div>
</template>


<script>
export default {
    props: {
        balance: {
            type: [Number, String],
            default: 0
        }
    },

    data() {
        return {
            options: [{
                label: this.$t('my.微信'),
                value: 1
            }, {

                label: this.$t('my.支付宝'),
                value: 2
            }, {

                label: this.$t('my.U盾'),
                value: 3
            }
            ],
            value: 1,

            amount: '',
            address: ""
        }
    },
    methods: {
        async submit() {
            await this.$api.usersApi.withdraw({
                amount: this.amount,
                type: this.value,
                address: this.address,
            });
            this.$message({
                message: this.$t('my.提现申请已提交'),
                type: 'success'
            });
            this.$emit("ok")
        }
    }
}
</script>

<style lang="scss" scoped>
.withdraw {
    cursor: default;

    .title {
        font-size: 16px;
        color: #333333;
    }

    .input_view {
        margin: 20px 0 28px;
        border-bottom: 1px solid #EDEDED;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .unit {
            font-weight: bold;
            font-size: 32px;
            color: #333333;
        }

        .input {
            flex: 1;

            height: 45px;
            font-weight: 600;
            font-size: 16px;
            color: #333333;
            border: none;
            outline: none;
        }

        .btn {
            padding: 0 10px;
            box-sizing: border-box;
            // width: 80px;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            color: #2273FF;
        }
    }

    .options {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .key {
            font-size: 16px;
            color: #333333;
        }

    }

    .submit {
        width: 428px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
        border-radius: 8px 8px 8px 8px;
        margin: 0 auto;
        margin-top: 200px;
        cursor: pointer;
    }
}
</style>